<template>
  <div class="detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="el-icon-document"></i>
            单据详情
          </h1>
          <div class="page-breadcrumb">
            <span class="breadcrumb-item">单据管理</span>
            <i class="el-icon-arrow-right"></i>
            <span class="breadcrumb-item">单据列表</span>
            <i class="el-icon-arrow-right"></i>
            <span class="breadcrumb-current">单据详情</span>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" icon="el-icon-back" @click="handleBack">
            返回列表
          </el-button>
        </div>
      </div>
    </div>

    <!-- 单据基本信息 -->
    <div class="content-section">
      <el-card class="info-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <i class="el-icon-info"></i>
            <span>基本信息</span>
          </div>
          <el-tag
            :type="getUploadStateTagType(billsInfo.uploadState)"
            size="small"
          >
            {{ getUploadStateText(billsInfo.uploadState) }}
          </el-tag>
        </div>

        <div class="info-grid">
          <div class="info-row">
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-document-copy"></i>
                单据号
              </div>
              <div class="info-value">{{ billsInfo.billsID || '-' }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-collection-tag"></i>
                单据类型
              </div>
              <div class="info-value">{{ billsInfo.billsType || '-' }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-user"></i>
                操作用户
              </div>
              <div class="info-value">{{ billsInfo.userID || '-' }}</div>
            </div>
          </div>

          <div class="info-row">
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-office-building"></i>
                往来单位
              </div>
              <div class="info-value">{{ billsInfo.billsCD || '-' }}</div>
            </div>
            <div class="info-group">
              <div class="info-label">
                <i class="el-icon-time"></i>
                确认时间
              </div>
              <div class="info-value">{{ formatDateTime(billsInfo.checkDate) }}</div>
            </div>
            <div class="info-group">
              <!-- 占位，保持布局对齐 -->
            </div>
          </div>

        </div>
      </el-card>
    </div>

    <!-- 单据明细信息 -->
    <div class="content-section">
      <el-card class="detail-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="header-title">
            <i class="el-icon-menu"></i>
            <span>明细信息</span>
          </div>
          <div class="header-stats">
            <el-tag type="info" size="small">
              共 {{ detailList.length }} 条记录
            </el-tag>
          </div>
        </div>

        <el-table
          v-loading="loading"
          :data="pagedDetailList"
          class="detail-table"
          :header-cell-style="{
            fontWeight: '600',
            fontSize: '13px'
          }"
          :row-style="{ height: '50px' }"
          stripe
        >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="药品ID" align="center" prop="drugID" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.drugID || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="药品名称" align="center" prop="drugName" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.drugName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" prop="drugGG" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.drugGG || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" prop="drugDW" width="80">
          <template slot-scope="scope">
            {{ scope.row.drugDW || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="drugNum" width="100">
          <template slot-scope="scope">
            {{ scope.row.drugNum || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="确认数量" align="center" prop="drugCheckNum" width="100">
          <template slot-scope="scope">
            {{ scope.row.drugCheckNum || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="生产厂家" align="center" prop="drugCD" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.drugCD || '-' }}
          </template>
        </el-table-column>
<!--        <el-table-column label="编号" align="center" prop="drugBH" min-width="120">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.drugBH || '-' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="批号" align="center" prop="drugBatchNo" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.drugBatchNo || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="生产日期" align="center" prop="drugPD" width="120">
          <template slot-scope="scope">
            {{ formatDateOnly(scope.row.drugPD) }}
          </template>
        </el-table-column>
        <el-table-column label="有效期" align="center" prop="drugExp" width="120">
          <template slot-scope="scope">
            {{ formatDateOnly(scope.row.drugExp) }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.remarks || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-tickets"
              @click="handleViewTraceCode(scope.row)"
              class="action-btn"
            >
              追溯码
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <pagination
          v-show="detailList.length > 0"
          :total="detailList.length"
          :page.sync="detailPageNum"
          :limit.sync="detailPageSize"
          @pagination="handleDetailPagination"
        />
      </div>
    </el-card>
    </div>

    <!-- 追溯码信息弹窗 -->
    <el-dialog
      :visible.sync="qrCodeDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      top="3vh"
      class="trace-dialog"
      :show-close="false"
    >
      <div slot="title" class="dialog-header">
        <div class="dialog-title">
          <i class="el-icon-tickets"></i>
          <span>追溯码信息</span>
        </div>
        <el-button
          type="text"
          icon="el-icon-close"
          @click="qrCodeDialogVisible = false"
          class="close-btn"
        />
      </div>

      <div v-if="qrCodeLoading" class="trace-loading">
        <div class="loading-content">
          <i class="el-icon-loading"></i>
          <p>正在加载追溯码信息...</p>
        </div>
      </div>

      <div v-else-if="currentQrCodeList.length === 0" class="trace-empty">
        <div class="empty-content">
          <i class="el-icon-info"></i>
          <p>该明细暂无追溯码信息</p>
        </div>
      </div>

      <div v-else class="trace-content">
        <!-- 药品信息头部 -->
        <div class="drug-info-section">
          <div class="drug-main-info">
            <div class="drug-title">
              <i class="el-icon-medicine-box"></i>
              <h3>{{ currentDrugInfo.drugName }}</h3>
              <el-tag size="small" type="info">{{ currentDrugInfo.drugID }}</el-tag>
            </div>
            <div class="drug-details">
              <span class="detail-item">
                <i class="el-icon-collection-tag"></i>
                规格：{{ currentDrugInfo.drugGG }}
              </span>
              <span class="detail-item">
                <i class="el-icon-scale"></i>
                单位：{{ currentDrugInfo.drugDW }}
              </span>
              <span class="detail-item">
                <i class="el-icon-s-data"></i>
                数量：{{ currentDrugInfo.drugNum }}
              </span>
            </div>
          </div>

          <!-- 层级信息和导航 -->
          <div class="hierarchy-section" v-if="qrCodeHierarchy.type === 'MULTI_LEVEL' || breadcrumbPath.length > 0">
            <div class="level-info" v-if="qrCodeHierarchy.levelData && qrCodeHierarchy.levelData.length > 0">
              <el-tag
                v-for="level in qrCodeHierarchy.levelData"
                :key="level.level"
                :type="getQrCodeLevelType(level.level)"
                size="small"
                style="margin-right: 8px;"
              >
                {{ getQrCodeLevelText(level.level) }}: {{ level.count }}个
              </el-tag>
              <el-tag type="info" size="small">
                <i class="el-icon-s-data"></i>
                总码数：{{ qrCodeHierarchy.totalCount }}
              </el-tag>
            </div>

            <!-- 导航和操作 -->
            <div class="navigation-actions" v-if="breadcrumbPath.length > 0">
              <!-- 面包屑导航 -->
              <el-breadcrumb
                separator=">"
                class="trace-breadcrumb"
              >
                <el-breadcrumb-item @click.native="goToLevel(0)" class="breadcrumb-link">
                  <i class="el-icon-house"></i> 根级别
                </el-breadcrumb-item>
                <el-breadcrumb-item
                  v-for="(item, index) in breadcrumbPath"
                  :key="index"
                  @click.native="goToLevel(index + 1)"
                  class="breadcrumb-link"
                >
                  {{ item.name }}
                </el-breadcrumb-item>
              </el-breadcrumb>

              <!-- 返回上一级按钮 -->
              <el-button
                type="primary"
                icon="el-icon-back"
                size="mini"
                @click="goBackOneLevel"
                class="back-level-btn"
              >
                返回上一级
              </el-button>
            </div>
          </div>
        </div>

        <!-- 追溯码网格 -->
        <div class="trace-codes-section">
          <div class="trace-code-grid">
            <div
              v-for="(traceCode, index) in currentQrCodeList"
              :key="index"
              class="trace-card"
              :class="{ 'has-children': hasChildren(traceCode) }"
            >
              <!-- 卡片头部 -->
              <div class="card-header-trace">
                <div class="card-number">{{ index + 1 }}</div>
                <div class="card-badges">
                  <el-tag
                    size="mini"
                    :type="getQrCodeLevelType(traceCode.codelevel)"
                    class="level-badge"
                  >
                    {{ getQrCodeLevelText(traceCode.codelevel) }}
                  </el-tag>
                </div>
              </div>

              <!-- 卡片内容 -->
              <div class="card-content">
                <div class="trace-code-section">
                  <div class="code-label">
                    <i class="el-icon-postcard"></i>
                    追溯码
                  </div>
                  <div class="code-value">
                    <span class="code-text" :title="traceCode.barcode">
                      {{ traceCode.barcode || '-' }}
                    </span>
                    <el-button
                      v-if="traceCode.barcode"
                      type="text"
                      size="mini"
                      @click="copyToClipboard(traceCode.barcode)"
                      class="copy-btn"
                      title="复制追溯码"
                    >
                      <i class="el-icon-copy-document"></i>
                    </el-button>
                  </div>
                </div>

                <div class="scan-time-section">
                  <div class="time-label">
                    <i class="el-icon-time"></i>
                    扫描时间
                  </div>
                  <div class="time-value">{{ formatDateTime(traceCode.scantime) }}</div>
                </div>

                <!-- 子码操作 -->
                <div class="card-actions" v-if="hasChildren(traceCode)">
                  <el-tag size="mini" type="warning" class="children-tag">
                    <i class="el-icon-folder-opened"></i> 有子码
                  </el-tag>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="expandChildCodes(traceCode)"
                    :loading="qrCodeLoading"
                    icon="el-icon-zoom-in"
                    class="expand-btn"
                  >
                    查看子码
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getQrCodeHierarchyByBillsIDAndDrugID, getChildCodesByParentCode } from "@/api/wareHouse/list";

export default {
  name: "BillsDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单据主表信息
      billsInfo: {},
      // 单据明细列表
      detailList: [],
      // 明细分页参数
      detailPageNum: 1,
      detailPageSize: 10,
      // 二维码弹窗相关
      qrCodeDialogVisible: false,
      qrCodeLoading: false,
      currentQrCodeList: [],
      currentDrugInfo: {},
      // 层级展示相关
      qrCodeHierarchy: {},
      currentLevel: 1,
      breadcrumbPath: [], // 面包屑导航
      expandedCodes: new Set() // 已展开的码
    };
  },
  computed: {
    // 分页后的明细数据
    pagedDetailList() {
      const start = (this.detailPageNum - 1) * this.detailPageSize;
      const end = start + this.detailPageSize;
      return this.detailList.slice(start, end);
    }
  },
  created() {
    this.getBillsDetail();
  },

  watch: {
    // 监听路由参数变化，当单据号改变时重新加载数据
    '$route.query.billsID': {
      handler(newBillsID, oldBillsID) {
        if (newBillsID && newBillsID !== oldBillsID) {
          this.getBillsDetail();
        }
      },
      immediate: false
    }
  },
  methods: {
    /** 获取单据详细信息 */
    getBillsDetail() {
      const billsID = this.$route.query.billsID;
      console.log('获取单据详细信息 - 单据号:', billsID);

      if (!billsID) {
        this.$modal.msgError("单据号不能为空");
        this.handleBack();
        return;
      }

      this.loading = true;
      // 重置数据
      this.billsInfo = {};
      this.detailList = [];
      this.detailPageNum = 1;

      getList(billsID).then(response => {
        console.log('获取单据详细信息成功:', response.data);
        this.billsInfo = response.data;
        this.detailList = response.data.pdaWarehouseBillsDetailList || [];
        console.log('单据明细数量:', this.detailList.length);
        this.loading = false;
      }).catch(error => {
        console.error('获取单据详细信息失败:', error);
        this.loading = false;
        this.$modal.msgError("获取单据详细信息失败");
      });
    },
    /** 返回列表 */
    handleBack() {
      this.$router.go(-1);
    },
    /** 明细分页处理 */
    handleDetailPagination(val) {
      this.detailPageNum = val.page;
      this.detailPageSize = val.limit;
    },
    /** 格式化日期时间 */
    formatDateTime(dateTime) {
      if (!dateTime) return '-';

      // 处理SQL Server的datetime格式：2025-03-19 15:02:21.9470000
      const date = new Date(dateTime);
      if (isNaN(date.getTime())) return dateTime;

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    /** 格式化日期（仅年月日） */
    formatDateOnly(dateTime) {
      if (!dateTime) return '-';

      // 处理SQL Server的datetime格式：2025-03-19 15:02:21.9470000
      const date = new Date(dateTime);
      if (isNaN(date.getTime())) return dateTime;

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },

    /** 获取上传状态文本 */
    getUploadStateText(uploadState) {
      switch(uploadState) {
        case '0': return '未上传';
        case '1': return '上传成功';
        case '2': return '上传失败';
        default: return '-';
      }
    },

    /** 获取上传状态标签类型 */
    getUploadStateTagType(uploadState) {
      switch(uploadState) {
        case '0': return 'warning';  // 未上传 - 橙色
        case '1': return 'success';  // 上传成功 - 绿色
        case '2': return 'danger';   // 上传失败 - 红色
        default: return 'info';
      }
    },

    /** 查看明细追溯码 */
    handleViewTraceCode(row) {
      console.log('查看追溯码 - 明细信息:', row);
      console.log('当前单据ID:', this.billsInfo.billsID);

      // 保存当前药品信息
      this.currentDrugInfo = {
        drugID: row.drugID,
        drugName: row.drugName,
        drugGG: row.drugGG,
        drugDW: row.drugDW,
        drugBatchNo: row.drugBatchNo,
        drugNum: row.drugNum
      };

      // 显示弹窗
      this.qrCodeDialogVisible = true;

      // 获取该药品的追溯码信息，传递单据ID和药品ID两个参数
      this.getQrCodeInfoByBillsIDAndDrugID(this.billsInfo.billsID,row.drugBatchNo, row.drugID);
    },


    /** 根据单据ID和药品ID获取层级追溯码信息 */
    getQrCodeInfoByBillsIDAndDrugID(billsID,drugBatchNo,drugID) {
      if (!billsID) {
        this.$modal.msgWarning("单据ID不能为空");
        return;
      }
      if (!drugID) {
        this.$modal.msgWarning("药品ID不能为空");
        return;
      }
      if (!drugBatchNo) {
        this.$modal.msgWarning("批次号不能为空");
        return;
      }

      console.log('查询追溯码 - 单据ID:', billsID, '药品ID:', drugID);
      console.log('API调用参数确认 - billsID类型:', typeof billsID, 'drugID类型:', typeof drugID);

      this.qrCodeLoading = true;
      this.currentQrCodeList = [];
      this.qrCodeHierarchy = {};
      this.breadcrumbPath = [];
      this.currentLevel = 1;

      getQrCodeHierarchyByBillsIDAndDrugID(billsID,drugBatchNo, drugID).then(response => {
        console.log('获取单据药品层级追溯码信息成功:', response.data);
        this.qrCodeHierarchy = response.data || {};

        if (this.qrCodeHierarchy.totalCount > 0 && this.qrCodeHierarchy.levelData && this.qrCodeHierarchy.levelData.length > 0) {
          // 合并所有级别的码进行显示
          this.currentQrCodeList = this.qrCodeHierarchy.levelData.flatMap(level => level.codes || []);
        } else {
          this.currentQrCodeList = [];
        }

        this.qrCodeLoading = false;
      }).catch(error => {
        console.error('获取单据药品层级追溯码信息失败:', error);
        this.qrCodeLoading = false;
        this.currentQrCodeList = [];
        this.qrCodeHierarchy = {};
        this.$modal.msgError("获取追溯码信息失败");
      });
    },

    /** 展开子码 */
    expandChildCodes(parentCode, isNavigatingBack = false) {
      if (!parentCode.barcode) {
        this.$modal.msgWarning("无效的追溯码");
        return;
      }

      this.qrCodeLoading = true;

      getChildCodesByParentCode(parentCode.barcode).then(response => {
        console.log('获取子码成功:', response.data);
        const childCodes = response.data || [];

        if (childCodes.length === 0) {
          this.$modal.msgInfo("该码下没有子码");
          this.qrCodeLoading = false;
          return;
        }

        // 如果不是返回操作，则更新面包屑
        if (!isNavigatingBack) {
          this.breadcrumbPath.push({
            name: `${this.getQrCodeLevelText(parentCode.codelevel)} (${parentCode.barcode.substring(0, 8)}...)`,
            code: parentCode.barcode,
            level: parentCode.codelevel
          });
        } else {
          // 如果是返回操作，需要截断面包屑路径
          const parentIndex = this.breadcrumbPath.findIndex(item => item.code === parentCode.barcode);
          if (parentIndex !== -1) {
            this.breadcrumbPath = this.breadcrumbPath.slice(0, parentIndex + 1);
          }
        }

        // 更新当前显示的码列表
        this.currentQrCodeList = childCodes;
        this.currentLevel = parentCode.codelevel - 1; // 子码级别更低
        this.qrCodeLoading = false;
      }).catch(error => {
        console.error('获取子码失败:', error);
        this.qrCodeLoading = false;
        this.$modal.msgError("获取子码失败");
      });
    },

    /** 返回上一级 */
    goBackOneLevel() {
      if (this.breadcrumbPath.length > 0) {
        // 如果当前在第二级，则返回第一级（根级别）
        if (this.breadcrumbPath.length === 1) {
          this.goToLevel(0);
        } else {
          // 如果当前在更深层级，则返回到上一级的父码
          const parentOfCurrentLevel = this.breadcrumbPath[this.breadcrumbPath.length - 2];
          this.expandChildCodes({ barcode: parentOfCurrentLevel.code, codelevel: parentOfCurrentLevel.level }, true);
        }
      }
    },

    /** 导航到指定层级 */
    goToLevel(levelIndex) {
      if (levelIndex === 0) {
        // 回到根级别，重新加载初始追溯码信息
        this.getQrCodeInfoByBillsIDAndDrugID(this.billsInfo.billsID, this.currentDrugInfo.drugBatchNo, this.currentDrugInfo.drugID);
      } else {
        // 点击面包屑导航到指定层级
        const targetLevelParent = this.breadcrumbPath[levelIndex - 1];
        this.expandChildCodes({ barcode: targetLevelParent.code, codelevel: targetLevelParent.level }, true);
      }
    },

    /** 判断是否可以查看子码 */
    hasChildren(qrCode) {
      // 只要码的级别大于1，就认为它可能含有子码
      return qrCode.codelevel > 1;
    },

    /** 复制到剪贴板 */
    copyToClipboard(text) {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          this.$modal.msgSuccess("追溯码已复制到剪贴板");
        }).catch(() => {
          this.fallbackCopyToClipboard(text);
        });
      } else {
        this.fallbackCopyToClipboard(text);
      }
    },

    /** 兼容性复制方法 */
    fallbackCopyToClipboard(text) {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position = "fixed";
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

      try {
        document.execCommand('copy');
        this.$modal.msgSuccess("追溯码已复制到剪贴板");
      } catch (err) {
        this.$modal.msgError("复制失败，请手动复制");
      }

      document.body.removeChild(textArea);
    },

    /** 获取追溯码级别标签类型 */
    getQrCodeLevelType(codelevel) {
      switch(codelevel) {
        case 1: return 'success';  // 一级码 - 绿色
        case 2: return 'warning';  // 二级码 - 橙色
        case 3: return 'info';     // 三级码 - 蓝色
        default: return 'info';
      }
    },

    /** 获取追溯码级别文本 */
    getQrCodeLevelText(codelevel) {
      switch(codelevel) {
        case 1: return '一级码';
        case 2: return '二级码';
        case 3: return '三级码';
        default: return '未知级别';
      }
    },
  }
};
</script>

<style scoped>
/* 整体容器 */
.detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f2f5 0%, #e6f7ff 100%);
  padding: 0;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
  color: white;
  padding: 24px 32px;
  box-shadow: 0 4px 20px rgba(24, 144, 255, 0.15);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title i {
  font-size: 32px;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
}

.breadcrumb-item {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-current {
  color: white;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 内容区域 */
.content-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* 卡片样式 */
.info-card, .detail-card {
  border-radius: 16px;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.info-card:hover, .detail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e9ecef;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.header-title i {
  font-size: 20px;
  color: #1890ff;
}

.header-stats {
  display: flex;
  gap: 8px;
}

/* 信息网格 */
.info-grid {
  padding: 24px;
}

.info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 20px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #6c757d;
}

.info-label i {
  color: #1890ff;
  font-size: 14px;
}

.info-value {
  font-size: 15px;
  font-weight: 500;
  color: #2c3e50;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #e9ecef;
  transition: all 0.3s ease;
}

.info-value.primary {
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
  color: white;
  border-left-color: #1890ff;
}

.info-value:hover {
  background: #e9ecef;
  border-left-color: #1890ff;
}

/* 表格样式 */
.detail-table {
  border-radius: 12px;
  overflow: hidden;
}

::v-deep .detail-table .el-table__header-wrapper {
  border-radius: 12px 12px 0 0;
}

::v-deep .detail-table .el-table__body-wrapper {
  border-radius: 0 0 12px 12px;
}

::v-deep .detail-table .el-table__row {
  transition: all 0.3s ease;
}

::v-deep .detail-table .el-table__row:hover {
  background-color: #f8f9ff !important;
}

.action-btn {
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background: #f8f9fa;
  border-radius: 0 0 16px 16px;
}

/* 弹窗样式 */
.trace-dialog {
  border-radius: 20px;
  overflow: hidden;
}

::v-deep .trace-dialog .el-dialog {
  border-radius: 20px;
  overflow: hidden;
}

::v-deep .trace-dialog .el-dialog__header {
  padding: 0;
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
}

::v-deep .trace-dialog .el-dialog__body {
  padding: 0;
  background: #f8f9fa;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  color: white;
}

.dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
}

.dialog-title i {
  font-size: 24px;
}

.close-btn {
  color: white !important;
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 加载和空状态 */
.trace-loading, .trace-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: white;
}

.loading-content, .empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #6c757d;
}

.loading-content i, .empty-content i {
  font-size: 48px;
  color: #1890ff;
}

.loading-content p, .empty-content p {
  font-size: 16px;
  margin: 0;
}

/* 追溯码内容区域 */
.trace-content {
  background: white;
  min-height: 400px;
}

/* 药品信息区域 */
.drug-info-section {
  padding: 24px;
  background: white;
  border-bottom: 1px solid #e9ecef;
}

.drug-main-info {
  margin-bottom: 20px;
}

.drug-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.drug-title i {
  font-size: 24px;
  color: #1890ff;
}

.drug-title h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.drug-details {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6c757d;
  padding: 6px 12px;
  background: #f8f9fa;
  border-radius: 20px;
}

.detail-item i {
  color: #1890ff;
}

/* 层级信息区域 */
.hierarchy-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.navigation-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.trace-breadcrumb {
  flex-grow: 1;
}

.back-level-btn {
  background: linear-gradient(135deg, #6c757d 0%, #343a40 100%);
  border: none;
  transition: all 0.3s ease;
}

.back-level-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.level-info {
  display: flex;
  gap: 8px;
}

.trace-breadcrumb {
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.breadcrumb-link {
  cursor: pointer;
  transition: all 0.3s ease;
}

.breadcrumb-link:hover {
  color: #1890ff !important;
}

/* 弹窗样式 */
.drug-info-header {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.drug-info-header h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.drug-info-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.qr-code-title {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.dialog-footer {
  text-align: center;
}

/* 追溯码网格区域 */
.trace-codes-section {
  padding: 24px;
  background: white;
}

.trace-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

/* 追溯码卡片 */
.trace-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.trace-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #1890ff;
}

.trace-card.has-children {
  border-color: #f39c12;
  background: linear-gradient(135deg, #ffffff 0%, #fef9e7 100%);
}

.trace-card.has-children:hover {
  border-color: #e67e22;
  box-shadow: 0 8px 25px rgba(243, 156, 18, 0.2);
}

/* 卡片头部 */
.card-header-trace {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e9ecef;
}

.card-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.card-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.level-badge, .status-badge {
  font-size: 11px !important;
  padding: 2px 6px !important;
}

/* 卡片内容 */
.card-content {
  padding: 16px;
}

.trace-code-section, .scan-time-section {
  margin-bottom: 12px;
}

.code-label, .time-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
  margin-bottom: 6px;
}

.code-label i, .time-label i {
  color: #1890ff;
  font-size: 13px;
}

.code-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #1890ff;
  border-radius: 8px;
}

.code-text {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #1e40af;
  word-break: break-all;
  flex: 1;
  line-height: 1.4;
}

.copy-btn {
  color: #1890ff !important;
  padding: 4px !important;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.copy-btn:hover {
  background: rgba(24, 144, 255, 0.1) !important;
  color: #0050b3 !important;
}

.time-value {
  font-size: 12px;
  color: #2c3e50;
  padding: 6px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #1890ff;
}

/* 卡片操作区域 */
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
}

.children-tag {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.expand-btn {
  background: linear-gradient(135deg, #1890ff 0%, #304156 100%);
  border: none;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.expand-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .trace-code-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .content-section {
    padding: 16px 20px;
  }

  .page-header {
    padding: 16px 20px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .drug-details {
    flex-direction: column;
    gap: 8px;
  }

  .trace-code-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card-badges {
    flex-direction: row;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 24px;
  }

  .trace-codes-section {
    padding: 16px;
  }

  .drug-info-section {
    padding: 16px;
  }
}
</style>
